<template>
  <div :class="[boolean.leftShow ? 'block' : 'hidden']"
    class="left-side absolute left-0 top-0 w-440px h-full box-border pl-20px pt-80px pb-20px z-3">
    <!-- 事故数对比 -->
    <div class="plan-title"><span class="text-gradient-white-to-teal-right">事故数对比</span></div>
    <accident-compare :today="todayData" :yesterday="yesterdayData" />

    <!-- 事故四项指数统计 -->
    <div class="plan-title mt-20px"><span class="text-gradient-white-to-teal-right">事故四项指数统计</span></div>
    <div ref="indicatorLineChartRef" class="h-250px w-90%" @click="handleChartClick"></div>

    <!-- 事故趋势变化 -->
    <div class="plan-title mt-20px"><span class="text-gradient-white-to-teal-right">事故趋势变化</span></div>
    <div ref="lineChartRef" class="h-250px w-90%" @click="handleChartClick1"></div>
  </div>
  <!-- 展开收起 -->
  <img :class="['absolute top-[40%] z-[2] w-40px h-40px ', boolean.leftShow ? 'left-440px' : 'rotate-180 left-0']"
    @click="btnClick" :src="getAssets('home/arrow-1.png')" />
</template>

<script setup>
import { getAssets } from "@/utils";
import { useBoolean } from "@/store";
import AccidentCompare from "./accident-compare.vue";
import { useAccidentCompare, useAccidentIndicatorStatistics, useAccidentIndicatorStatistics2, useAccidentTrendsLineChart } from "@/hooks/dashboard/useLeftCharts.js";

const boolean = useBoolean();
const btnClick = () => {
  boolean.leftShow = !boolean.leftShow;
};
const { getCompareInfo, todayData, yesterdayData } = useAccidentCompare();
// const { tableRef, indicatorData, getIndicatorStatistics, onTableMouseEnter, onTableMouseLeave } = useAccidentIndicatorStatistics()
const { indicatorLineChartRef, indicatorLineChartInstance, getIndicatorLineChartData, handleChartClick } = useAccidentIndicatorStatistics2();
const { lineChartRef, lineChartInstance, getLineChartData, handleChartClick1 } = useAccidentTrendsLineChart();

// 事故数对比
getCompareInfo();

useResizeObserver(document.body, () => {
  if (lineChartInstance.value) {
    lineChartInstance.value.resize({});
  }
});

const { pause } = useIntervalFn(() => {
  getCompareInfo();

  getIndicatorLineChartData();

  getLineChartData();
}, 1000 * 60 * 5);

onUnmounted(() => {
  pause();
});
</script>

<style lang="less" scoped>
.left-side {
  background: url("@/assets/img/home/bg-6.png") no-repeat center center;
  background-size: 100% 100%;

  :deep(.el-table) {
    --el-table-text-color: #c9cdfe;
    --el-table-header-text-color: #c9cdfe;
    --el-table-tr-bg-color: transparent;
    // --el-table-header-bg-color: #000064;
    --el-table-header-bg-color: #1c427e;
    // --el-table-border-color: #0d379a;
    --el-table-border-color: rgba(13, 55, 154, 0.1);
    --el-table-row-hover-bg-color: transparent;

    background-color: transparent !important;

    thead {
      tr th {
        .cell {
          font-weight: 700;
          padding: 0 4px;
        }
      }
    }

    .el-table__cell {
      padding: 3px 0;
    }

    .el-table__body-wrapper {
      tbody {
        tr {
          background-color: transparent !important;

          .cell {
            padding: 0 4px;
          }

          &:hover,
          &.hover-row {
            border-radius: 10px;
            // box-shadow: -10px 0 15px #082a9c inset, 10px 0 15px #082a9c inset;
          }
        }
      }
    }
  }
}
</style>
